<template>
  <view class="container">
    <!-- 导航栏组件 -->
    <uni-nav-bar
      title="详情"
      left-icon="back"
      right-icon="more-filled"
      @clickLeft="handleBack"
      @clickRight="handleMore"
      :background-color="navBarBgColor"
      :color="navBarTextColor"
      safe-area-inset-top
    ></uni-nav-bar>

    <!-- 页面主体内容 -->
    <view class="content">
      <!-- 头像及信息区域 -->
      <view class="info-section">
        <image class="avatar" :src="'/static/logo.png'"></image>
        <view class="info">
          <view class="name">{{name}}</view>
          <view class="nickname">昵称: {{nickname}}</view>
          <view class="region">地区: {{region}}</view>
        </view>
      </view>
      
      <!-- 朋友资料、权限入口 -->
      <view class="entry-container">
        <view class="entry" @click="handleEntry('friendInfo')" :class="{'active': entryActive === 'friendInfo'}">
          <text class="entry-text">朋友资料</text>
          <text class="entry-arrow">→</text>
        </view>
        <view class="entry" @click="handleEntry('friendPermit')" :class="{'active': entryActive === 'friendPermit'}">
          <text class="entry-text">朋友权限</text>
          <text class="entry-arrow">→</text>
        </view>
      </view>

      <!-- 新增的发消息、音视频通话区域 -->
      <view class="action-container">
        <view 
          class="action-item" 
          @click="handleSendMsg"
          :class="{'action-item-active': isActionActive === 'sendMsg'}"
          @touchstart="setActionActive('sendMsg')"
          @touchend="resetActionActive"
          @touchcancel="resetActionActive"
        >
          <text class="action-icon">💬</text>
          <text class="action-text">发消息</text>
        </view>
        <view 
          class="action-item" 
          @click="handleCall"
          :class="{'action-item-active': isActionActive === 'call'}"
          @touchstart="setActionActive('call')"
          @touchend="resetActionActive"
          @touchcancel="resetActionActive"
        >
          <text class="action-icon">📞</text>
          <text class="action-text">音视频通话</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';

// 导航栏配置
const navBarBgColor = ref('#FFFFFF');
const navBarTextColor = ref('#000000');

// 页面数据
const name = ref('温满华');
const nickname = ref('+_+');
const region = ref('示例地区');

// 点击状态管理
const entryActive = ref('');
const isActionActive = ref('');

// 导航栏事件处理
const handleBack = () => {
  uni.navigateBack({
    delta: 1
  });
};

const handleMore = () => {
  uni.showActionSheet({
    itemList: ['分享', '删除'],
    success: function (res) {
      if (res.tapIndex === 1) {
        handleDelete();
      } else {
        console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
      }
    },
    fail: function (res) {
      console.log(res.errMsg);
    }
  });
};

// 删除确认逻辑
const handleDelete = () => {
  uni.showModal({
    title: '确认删除',
    content: '确定要删除此内容吗？此操作不可恢复。',
    confirmText: '删除',
    confirmColor: '#FF4500',
    success: function (res) {
      if (res.confirm) {
        console.log('用户点击删除');
        uni.showToast({
          title: '已删除',
          icon: 'success'
        });
      } else if (res.cancel) {
        console.log('用户点击取消');
      }
    }
  });
};

// 朋友资料、权限点击处理
const handleEntry = (type) => {
  // 设置激活状态
  entryActive.value = type;
  
  // 添加短暂延迟，模拟点击反馈
  setTimeout(() => {
    entryActive.value = '';
    console.log(`点击了${type === 'friendInfo' ? '朋友资料' : '朋友权限'}入口`);
  }, 200);
};

// 新增的发消息点击事件
const handleSendMsg = () => {
  console.log('点击了发消息');
  // 实际项目中可在此处添加页面跳转逻辑
};

// 新增的音视频通话点击事件
const handleCall = () => {
  console.log('点击了音视频通话');
  // 实际项目中可在此处添加页面跳转逻辑
};

// 设置按钮点击状态
const setActionActive = (type) => {
  isActionActive.value = type;
};

// 重置按钮点击状态
const resetActionActive = () => {
  setTimeout(() => {
    isActionActive.value = '';
  }, 200);
};
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.content {
  flex: 1;
  background-color: #f5f5f5;
  padding: 20rpx;
}

.info-section {
  display: flex;
  align-items: center;
  padding: 20rpx;
  background-color: #fff;
  margin-bottom: 20rpx;
  border-radius: 8rpx;
}

.avatar {
  width: 100rpx;
  height: 100rpx;
  border-radius: 0;
  margin-right: 20rpx;
}

.info {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.name {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 8rpx;
}

.nickname,
.region {
  font-size: 28rpx;
  color: #999;
  margin-bottom: 4rpx;
}

.nickname {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.entry-container {
  background-color: #fff;
  border-radius: 8rpx;
}

.entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 30rpx;
  padding: 30rpx 20rpx;
  border-bottom: 1px solid #f5f5f5;
  transition: background-color 0.2s;
}

.entry:last-child {
  border-bottom: none;
}

.entry.active {
  background-color: #f0f0f0;
}

.entry-arrow {
  color: #999;
  font-size: 28rpx;
}

/* 新增的发消息、音视频通话区域样式 */
.action-container {
  background-color: #fff;
  border-radius: 8rpx;
  margin-top: 20rpx;
  display: flex;
  padding: 20rpx 0;
}

.action-item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  flex: 1;
  font-size: 30rpx;
  padding: 10rpx 0;
  transition: all 0.2s;
}

.action-item-active {
  background-color: #f0f0f0;
  transform: scale(0.95);
}

.action-icon {
  font-size: 48rpx;
  margin-bottom: 10rpx;
}

.action-text {
  font-size: 26rpx;
  color: #333;
}
</style>